<template>
  <dialog-form
    v-if="visible"
    ref="dialogForm"
    width="900px"
    :title="title"
    :visible="visible"
    :form-attrs="{formData: modalFormData, renderFormItem, formButtons, labelWidth: '110px', isHideButtons}"
    @close="hanleClose"
  />
</template>

<script>
import { fetchDropDeviceList, fetchDropDeptAllList, fetchDropPostList, fetchDropDictionaryList, fetchDroptRoleList } from '@/api/common/commonDropDown'
import { DialogForm } from '@/components'
import { modalFormItem, formButtons } from './config'
import { getBirthSexByIDCard } from '@/utils'

export default {
  name: 'CarUpdate',
  components: { DialogForm },
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    deptList: { // 部门下拉
      type: Array,
      default: () => ([])
    },
    isHideButtons: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postList: [], // 岗位下拉
      contractTypeList: [], // 合同类型下拉
      educationalList: [], // 文化程度下拉
      ruleList: [], // 角色权限下拉
      deviceList: [], // 设备下拉

      modalFormData: {},
      renderFormItem: modalFormItem(),
      formButtons: formButtons(this.handleModalSubmit, this.hanleClose)
    }
  },
  watch: {
    visible() {
      if (this.visible) {
        const { orgId, deptId } = this.modalFormData
        deptId && this.postPostAllList(deptId)
        this.postDroptRoleList(orgId)
        // this.postDeptAllList(orgId)
        this.postDropDeviceList(orgId)
        this.postDropDictionaryList('文化程度', 'educationalList')
        this.postDropDictionaryList('合同类型', 'contractTypeList')

        this._createRenderFormItem()
      }
    }
  },
  methods: {
    handleModalSubmit(values) { // 提交弹窗数据
      values.deviceIdStr = values.deviceIdList.join(',')
      values.insuranceType = values.insuranceTypeList.join(',')
      this.$emit('handleModalSubmit', values)
    },

    hanleClose() { // 关闭弹窗
      this.$emit('update:visible', false)
    },

    handleIdNumberBlur(e) { // 监听身份证号码失去焦点
      const { sex, birth } = getBirthSexByIDCard(e.target.value)
      const sexKey = sex ? sex === '男' ? 1 : 2 : ''
      this._setFormData({ birth, sex: sexKey })
    },

    handleDeptChange(e) { // 监听部门改变
      this.postPostAllList(e)
      this._setFormData({ postId: '' })
    },

    _setFormData(data) { // 设置弹窗数据
      this.$refs.dialogForm.$refs.modalForm.setFormData(data)
    },

    _createRenderFormItem() { // 创建 renderFormItem
      const { deptList, postList, contractTypeList, educationalList, ruleList, deviceList, handleIdNumberBlur, handleDeptChange } = this
      this.renderFormItem = modalFormItem(deptList, postList, contractTypeList, educationalList, ruleList, deviceList, handleIdNumberBlur, handleDeptChange)
    },

    postDeptAllList(orgId) { // 部门下拉
      fetchDropDeptAllList({ orgId }).then(res => {
        this.deptList = res.map(e => ({ key: e.id, value: e.name }))
        this._createRenderFormItem()
      })
    },

    postPostAllList(deptId = 0) { // 岗位下拉
      fetchDropPostList({ deptId }).then(res => {
        this.postList = res.map(e => ({ key: e.id, value: e.name }))
        this._createRenderFormItem()
      })
    },

    postDropDeviceList(orgId) { // 获取设备下拉
      fetchDropDeviceList({ orgId, bindType: 1 }).then(res => {
        this.deviceList = res.map(item => ({ key: item.id + '', value: item.name }))
        this._createRenderFormItem()
      })
    },

    postDropDictionaryList(groupName, key) { // 数据字典下拉
      fetchDropDictionaryList({ groupName }).then(res => {
        this[key] = res.map(e => ({ key: e.id + '', value: e.dicValue }))
        this._createRenderFormItem()
      })
    },

    postDroptRoleList(orgId) { // 角色下拉
      fetchDroptRoleList({ orgId }).then(res => {
        this.ruleList = res.map(item => ({ key: item.id, value: item.name }))
        this._createRenderFormItem()
      })
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
